
// box是轮播图盒子
// ul是图片盒子
// ol是圆点盒子
// left是左按钮
// right是右按钮
// 注意给box和ul加定位

// offsetWidth获得宽度


window.addEventListener('load', function () {
    // 获取盒子和左右按钮对象
    var left = document.querySelector('.title-btn-left');
    var right = document.querySelector('.title-btn-right');
    var box = document.querySelector('.title-left');

    //获取大盒子宽度
    var boxwidth = box.offsetWidth;
    // console.log(boxwidth);


    //鼠标经过轮播图，左右按钮显示，并且清除自动播放
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })

    //鼠标离开轮播图，左右按钮隐藏，并且自动点击右按钮，播放下一张
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            //默认手动点击
            right.click();
        }, 2000);
    })

    // 获取图片和按钮对象
    var ul = box.querySelector('.Carousel');
    var ol = box.querySelector('.circle');

    //根据图片个数，创建小圆点
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');//创建圆点
        li.setAttribute('index', i);//给每个小圆点添加索引类名
        ol.appendChild(li);//把圆点放在ol

        //li添加事件不能在外面，因为事件监听的对象是刚刚创建的li
        //放外面会导致只有最后创建的li会获得事件

        //创建的li获得点击事件
        //点击后，其他去除背景，当前圆圈背景变绿
        li.addEventListener('click', function () {
            //排他思想，清除其他圆点样式
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //点击的圆点获得变绿样式
            this.className = 'current';

            // 获得点击小圆点的索引值
            var index = this.getAttribute('index');

            //这样圆点和右侧按钮就有关联
            //不让点击一下右侧按钮，图片就绝对性的循环一次图片，而不是移动到对应的下一站=张
            num = index;//显示的图片为圆点索引值
            circle = index;//显示的圆点为圆点索引值

            //点到相应圆点滚到相应的图片
            animate(ul, -index * boxwidth);
            // console.log('你点击了小圆点');
        })
    }



    //默认定义一个小圆点为绿色
    ol.children[0].className = 'current';

    //复制最后一个图片
    var first = ul.children[0].cloneNode(true);
    //把复制的图片放在最后面
    ul.appendChild(first);
    var num = 0;//控制图片
    var circle = 0;//控制圆点
    var flag = true;//节流阀控制器(防止再播放时再次播放)


    right.addEventListener('click', function () {

        if (flag) {
            flag = false;
            //点击左键是图片整体向右移动
            //向右移，左边第一张就是最后一张图
            //无缝衔接,已经在最后一个图时,载点击下一个就重置到第一个位置,再滚动
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            //判断在累加前面,是为了让转换在滚动前面
            num++;

            //点击右侧按钮滚到下一个的图片
            animate(ul, -num * boxwidth, function () {
                flag = true;
            });



            //以上控制图片,以下控制圆点
            //判断在累加后面,是为了让判断该白圆圈的位置 //所以判断与累加的位置取决于哪个效果先实现
            circle++;
            //第一张图片的circle为0
            //点到克隆(多出)的那一张的时候,圆圈给第一张
            if (circle == ol.children.length) {
                circle = 0;
            }

            circleClear();
        }
        // console.log('你点击了左按钮');
    })





    left.addEventListener('click', function () {
        if (flag) {
            //节流阀
            flag = false;
            //点击左键是图片整体向右移动
            //向右移，左边第一张就是最后一张图
            //无缝衔接,已经在最后一个图时,载点击下一个就重置到第一个位置,再滚动
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = num + 'px';
            }
            //判断在累加前面,是为了让转换在滚动前面
            num--;

            //点击右侧按钮滚到下一个的图片
            animate(ul, -num * boxwidth, function () {
                flag = true;//运行完再开水龙头
            });

            //判断在累加后面,是为了让判断该白圆圈的位置 //所以判断与累加的位置取决于哪个效果先实现
            circle--;
            //第一张图片的circle为0
            //点到克隆(多出)的那一张的时候,圆圈给第一张
            if (circle < 0) {
                circle = ol.children.length - 1;
            }

            circleClear();
        }
        // console.log('你点击了右按钮');
    })




    function circleClear() {
        //点击后，其他去除背景，当前圆圈背景变白
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }

        ol.children[circle].className = 'current';
    }



    var timer = setInterval(function () {
        //默认手动点击
        right.click();
    }, 2000);
})




